<template>
  <el-table
    :data="tableData"
    size="mini"
    ref="multipleTable"
    style="width: 100%">
    <el-table-column
      prop="displayName"
      :label="$t('config.agent.agentName')">
    </el-table-column>
    <el-table-column
      prop="deptName"
      :label="$t('config.agent.dept')">
    </el-table-column>
    <el-table-column
      :label="$t('config.agent.parentAgent')"
      width="120">
      <template scope="scope">
        <agent
          :id="scope.row.parentId"
          :isNum="true"
        ></agent>
      </template>
    </el-table-column>
    <el-table-column
      prop="roleName"
      :label="$t('config.agent.role')"
      >
    </el-table-column>
    <el-table-column
      :label="$t('configTabTitle.callQueueConfig')"
      >
      <template scope="scope">
        <span>{{scope.row.callQueueNames || ''}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="$t('configTabTitle.webchatQueueConfig')"
      >
      <template scope="scope">
      <span>{{scope.row.mailQueueNames || ''}}
      </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="mobile"
      :label="$t('public.phoneNum')">
    </el-table-column>
    <el-table-column
      :label="$t('public.state')">
      <!-- 判断显示那个状态 -->
      <template scope="scope">
        <span v-if="scope.row.lockTime" class="lock">
          {{scope.row.lockTime ? $t('config.agent.stoped') : ''}}
        </span>
        <span :class="[scope.row.status==='disable'?'red': '']"  v-if="!scope.row.lockTime">
          {{scope.row.status!== 'enable' ? $t('config.agent.terminated') : $t('config.agent.reuse')}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="uversion1"
      :label="$t('agentSetting.agentSetting36')">
    </el-table-column>
    <el-table-column
      :label="$t('public.operate')"
      width="130">
      <!-- 判断是否显示接触锁定 -->
      <template scope="scope">
        <el-button
          @click.native.prevent="updateUser(scope.$index, tableData)"
          type="text"
          size="small">
          {{$t('public.edit')}}
        </el-button>
        <el-button
          v-if = "tableData[scope.$index].lockTime"
          @click.native.prevent="removeLock(scope.row._id)"
          type="text"
          size="small">
          {{$t('config.agent.removeStoped')}}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    name: 'AgentTable',
    data () {
      return {
      }
    },
    methods: {
      updateUser (index, object) {
        this.$emit('updateUser', object[index]._id)
      },
      removeLock (data) {
        this.$store.dispatch('removeLock', data)
        .then(res => {
          if (res && res.success) {
            this.$emit('removeLock')
          }
        })
      }
    },
    props: {
      tableData: Array
    },
    components: {
      Agent
    },
    mounted () {
     
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
.red
  color $c-pink
.lock
  color $c-cAgent
.el-table
  border-right 1px solid #e7e7eb
</style>
